function MsgBox(){
	var alertHtml = 
		'<div style="display:inline-block;background-color: lightgrey;border-radius: 5px;border:2px solid gray">' +
			'<div style="height: 20px;background-color: #428bca; padding: 5px;">' +
				'<div style="float:left">{{title}}</div>' +
				'<div style="float:right">' +
					'<span class="glyphicon glyphicon-remove-circle" style="cursor:pointer"></span>' +
				'</div>' +
			'</div>' +
			'<div style="padding:15px 30px;text-align: center;">' +
				'{{message}}' +
			'</div>' +
		'</div>';
	var confirmHtml =
		'<div style="display:inline-block;background-color: lightgrey;border-radius: 5px;border:2px solid gray;">' +
			'<div style="height: 20px;background-color: #428bca; padding: 5px;">' +
				'<div style="float:left">{{title}}</div>' +
				'<div style="float:right">' +
					'<span class="glyphicon glyphicon-remove-circle" style="cursor:pointer"></span>' +
				'</div>' +
			'</div>' +
			'<div style="padding:15px 30px;text-align: center;">' +
				'{{message}}' +
			'</div>' +
			'<div style="padding:5px 30px;text-align: center;">' +
				'<button class="btn blue sm ok">确定</button>' +
				'<button class="btn default sm cancel">取消</button>'
			'</div>'
		'</div>'; 
				
	MsgBox.prototype.alert = function(title, message){
		var temp = alertHtml.replace("{{title}}", title);
		temp = temp.replace("{{message}}", message);
		var container = document.createElement("div");
		container.innerHTML = temp;
		container.style.position = "fixed";
		container.style.visibility = "hidden";
	
		container.style.right = "20px";
		container.style.bottom = "20px";
		
		container.getElementsByClassName("glyphicon-remove-circle")[0].addEventListener(
			"click", function(){
				document.body.removeChild(container);
			}
		)
		container.style.visibility = "visible";
		document.body.appendChild(container);
		
		// 5秒后消除该消息框
		window.setTimeout(function(){
			document.body.removeChild(container);
		}, 5000);
	};
	
	MsgBox.prototype.confirm = function(title, message,callback){
		var temp = confirmHtml.replace("{{title}}", title);
		temp = temp.replace("{{message}}", message);
		
		// 创建蒙板
		var shield = document.createElement("div");
		shield.style.position = "absolute";
		shield.style.left = document.body.left;
		shield.style.top = 0;
		shield.style.width = document.body.clientWidth + "px";
		shield.style.height = document.body.clientHeight + "px";
		shield.style.opacity = 0;
		shield.style.visibility = "visible";	
		shield.style.zIndex = 100;
		document.body.appendChild(shield);
		
		var container = document.createElement("div");
		container.innerHTML = temp;
		container.style.position = "fixed";
		container.style.visibility = "hidden";
	
		container.style.right = "20px";
		container.style.bottom = "20px";
		container.style.zIndex = 101;
		
		container.getElementsByClassName("glyphicon-remove-circle")[0].addEventListener(
			"click", function(){
				document.body.removeChild(container);
				document.body.removeChild(shield);	
				callback(false);
			}
		)
		container.getElementsByClassName("ok")[0].addEventListener(
			"click", function(){
				document.body.removeChild(container);
				document.body.removeChild(shield);	
				callback(true);
			}
		)
		container.getElementsByClassName("cancel")[0].addEventListener(
			"click", function(){
				document.body.removeChild(container);
				document.body.removeChild(shield);					
				callback(false);
			}
		)
		
		container.style.visibility = "visible";		
		document.body.appendChild(container);
	}
}

var msgBox = (function(){
	return new MsgBox();
})();

